<template>

 <div>





       <div style="margin-left: 600px;width: 1000px;">
<!--         <el-form :inline="true" :model="product" class="demo-form-inline">-->
<!--           <el-input v-model="this.product.companyName" style="width: 250px;height:35px;border-right: none;border-color: cornflowerblue;margin-top: 15px" placeholder="搜索感兴趣的商家"></el-input>-->
<!--           <el-button type="primary" icon="el-icon-search" @click="list" >-->
<!--           搜索</el-button>-->
<!--         </el-form>-->
         <el-form :inline="true" :model="product" class="demo-form-inline">
           <el-form-item label="">
             <el-input v-model="product.companyName" placeholder="请输入感兴趣的商家"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="list">查询</el-button>
           </el-form-item>
         </el-form>

       </div>
    <div>
     <p id="p1" style="float: left;color: #42b983;margin-left: 300px;height: 30px;border-bottom: 2px solid palevioletred">借钱推荐</p>
     <p  id="p2" style="float: left;margin-left: 50px;height: 30px;color: #42b983">抵押贷</p>
    </div>




      <div v-for="(item,index) in ProductTable" :key="index" style="width: 800px;height: 150px;margin-left: 300px;margin-top: 60px;border-bottom:1px solid darkgrey">
        <div style="float: left;width: 1200px;height: 30px;margin-bottom: 10px">
          <img style="float: left;" :src="logo">
          <p style="float: left;">{{item.companyName}}</p>
            <div style="float: left;margin-top: 10px" v-for="(item2,index2) in tagIdsCut(item.tagIds)" :key="index2">
                <el-tag type="warning" style="margin-right: 10px">{{item2}}</el-tag>
            </div>
        </div>
        <div style="float: left;width: 500px;height: 50px;margin-left: 20px;margin-top: 10px">
          <div style="float: left;width: 100px;height: 50px;">
            <p style="float: left;color: dimgray">最高额度</p>
            <b style="font-size: 22px;float: left">{{item.amountMin}}</b>
          </div>
          <div style="float: left;width: 100px;height: 50px">
            <p style="float: left;color: dimgray">年利率化</p>
            <b style="font-size: 20px;float: left">{{item.annualizedRate}}</b>
          </div>
        </div>
        <div>
<!--          <button style="float: right;background: blue;width: 100px;height: 50px;border-radius: 20px"></button>-->
          <el-button type="primary" round style="margin-right: 100px;margin-top: 20px" @click="goShow(item)">去申请</el-button>
        </div>
      </div>
   <div style="margin-top: 50px">
   <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="this.product.pageNum"
       :page-sizes="[1, 2, 3, 4]"
       :page-size="this.product.pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="this.product.total">
   </el-pagination>
   </div>

 </div>
</template>

<script>
export default {
  data() {
    return {
      Tag:[],
      ProductTable:[],
      product:{
<<<<<<< HEAD
         pageNum: 1,
         pageSize: 3,
         total:0,
         nickName: ''
=======
       pageNum: 1,
       pageSize: 3,
       total:0
>>>>>>> b9a901b1fcebacba5607c234b0fee720966ba010
      },
      logo: require('@/assets/222.png'),
    }
  },
  created() {
<<<<<<< HEAD
    console.log(sessionStorage.getItem("username"))
    this.product.nickName = sessionStorage.getItem("username")
=======
>>>>>>> b9a901b1fcebacba5607c234b0fee720966ba010
    this.list()
  },
  methods: {
   list(){
     // eslint-disable-next-line no-unused-vars
<<<<<<< HEAD
     this.$http.post("/backstage/product/list",this.product).then( res=>{
         console.log(res.data)
=======
     this.$http.post("/product/list",this.product).then( res=>{
         // console.log(res.data)
>>>>>>> b9a901b1fcebacba5607c234b0fee720966ba010
        this.ProductTable=res.data.data.records
        this.product.total=res.data.data.total
     })
   },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.product.pageSize=val
      this.list()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.product.pageNum=val
      this.list()
    },
    goShow(item){
       this.$router.push({
         path:"/ProductShow",
         query:{
            productId:item.productId
         }
       })
    },
      tagIdsCut(tagIds){
          let company=(tagIds+'').split(',')
          return company
      },
  }
}
</script>

<style scoped>
#p1:hover{
  border-bottom: 2px solid #42b983;
  color: palevioletred;
}
#p2:hover{
  border-bottom: 2px solid red;
  color: palevioletred;
}
</style>
